<template>
  <view>
    <s-layout title="附近门店" navbar="custom1" :onShareAppMessage="shareInfo" :getStore="true" :isShowIm="false" :isShowPoster="false"
      @loginGetStore="loginGetStore">
      <assNavbar title="附近门店" :messageTitleShow="false">
        <template #center>
          <view class="w-100 search ss-flex ss-row-center ss-p-r-50 ss-p-r-16">
            <view class="w-100 ss-flex-1 right ss-flex  ss-row-between ss-r-50 ss-m-r-10">
              <view class="search-view ss-flex ss-row-left">
                <uni-icons class="search-icon" type="search" color="#E4E4E4" size="20"></uni-icons>
                <input class="my-input" :inputBorder="false" v-model="search" placeholder="搜索" />
              </view>
              <view class="search_btn" @click="onSearch">搜索</view>
            </view>
          </view>
        </template>
      </assNavbar>

      <!-- <c-search activeColor="#F46800" @change="searchChange" /> -->
      <view class="hasshopinfo" v-if="shopId !== null && shopId !== 0">
        <view class="shopinfo">
          <div class="left">
            <image mode="aspectFit"
              :src="sheep.$url.cdn(shopInfo.thumb||'/storage/storelevel/20250410/54cf8f23d18011b35a5d21159bfb31f9.png')">
            </image>
            <div class="content">
              <div class="title">{{ shopInfo.name }}
                <!-- <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'gold'"
                  :src="sheep.$url.cdn('/storage/default/20250408/adc153bf0abc8403c53e1dfa464fda54.png')"></image>
                <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'diamond'"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/bf04923b33c15b9483999d5ca079893f.png">
                </image>
                <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'starshine'"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/c43f9416612f9968211e079c1abcbc5b.png">
                </image>
                <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'honor'"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/b663a9567beb34aa7e469beec7c1ce72.png">
                </image> -->

              </div>


              <view class="rank">
                <uni-rate :touchable="false" :value="shopInfo.mark == null || shopInfo.mark == '' ? 0 : shopInfo.mark"
                  :readonly="true" size="14" />{{
                    shopInfo.mark == "" || shopInfo.mark == null || shopInfo.mark == '' ? '0' : shopInfo.mark }}.0
              </view>
            </div>
          </div>
          <div class="right">

            <view  class="posiss">
              <view v-if="shopInfo.my_shop == 1" class="goodselect" @click="gotoSelectGoods()">
                选品带货
              </view>
			  <button v-if="shopInfo.my_shop == 1" class="ss-reset-button task-item-share-2 ss-flex justify-center align-center"
			      @click="sheep.$router.go('/pages/store/setting')">
			      <image style="width: 60rpx;height: 60rpx;"
			        :src="sheep.$url.cdn('/static/icon/setting.png')"
			        mode="widthFix"></image>
			    </button>
			  <button class="ss-reset-button task-item-share-2 ss-flex justify-center align-center"
			    @click="shares(item)">
			    <view class="shares">
			      <image 
			        :src="sheep.$url.cdn('/static/icon/share1.png')"
			        mode="widthFix"></image>
			    </view>
			  </button>
            </view>
          </div>
        </view>
        <!-- 商品列表 -->
        <view class="goodsList" v-if="goodsList.length > 0">
          <view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goodsClick(item)">
            <image class="goods-img" :src="sheep.$url.cdn(item.image)"></image>
            <view class="goods-title">{{ item.title }}</view>
            <view class="item-bounty ss-flex  align-center" v-if="shopInfo.my_shop == 1">
              <view class="brokerage">
                佣金<text>￥{{ parseFloat(item.price * item.commission_money_rate / 100).toFixed(2) }}</text>
              </view>
              <view class="ratio ss-flex  align-center">
                <view class="label">佣金比例</view>  
                <view class="valuye">
                  {{ item.commission_money_rate }}%
                </view>
              </view>
            </view>
            <view class="goods-desc">
              <view class="desc">¥{{ item.price }}</view>
              <view class="share-sales">
                <view class="sales">已售{{ item.sales }}件</view>
                <button open-type="share"
                  class=" share ss-reset-button task-item-share-2 ss-flex justify-center align-center"
                  @tap.stop="share(item)">
                  <image class="share-img" :src="sheep.$url.cdn('/static/img/share-forward-fill.png')"></image>
                </button>
                <!-- <view class="share" @tap.stop="shares(item)">
                  <image class="share-img" :src="sheep.$url.cdn('/static/img/share-forward-fill.png')"></image>
                </view> -->
              </view>
            </view>
            <view class="del" v-if="shopInfo.my_shop == 1" @click.stop="delGoods(item)">删除</view>
          </view>
          <view class="blank">我也是有底线的</view>
        </view>
        <view class="nogoods" v-if="goodsList.length == 0">
          暂无商品
        </view>
      </view>
      <view class="noshopid" v-else>
        您还没有店铺哦~
        <view class="openShop" @click="openShop()">
          去申请
        </view>
      </view>
    </s-layout>
  </view>
</template>

<script setup>
//附近门店列表页
import {
  computed,
  reactive,
  onBeforeMount,
  ref
} from 'vue';
import {
  onLoad,
  onShow,
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import merchantApi from '@/sheep/api/merchant'
import _ from 'lodash'
import {
  isEmpty
} from 'lodash';
import assNavbar from '@/components/ass-navbar.vue'
import { showShareModal } from '@/sheep/hooks/useModal';
const userInfos = ref({})
const isLogin = computed(() => {
  if (sheep.$store("user").isLogin) {
    console.log(1)
  }
})
const shareInfo = computed(() => {
  if (isEmpty(state.item)) return {};
  if (shareType.value == 0) {
    return {
      title: state.item.desc,
      path: `/pages/store/myshop?id=${state.item.id}&user_id=${userInfos.value.id}`,
      image: ""
    }
  }
  else {
    return sheep.$platform.share.getShareInfo(
      {
        title: state.item.title,
        image: sheep.$url.cdn(state.item.image),
        desc: state.item.subtitle,
        params: {
          page: '2',
          query: state.item.id,
        },
      },
      {
        id: state.item.id,
        type: 'goods', // 商品海报
        title: state.item.title, // 商品标题
        image: sheep.$url.cdn(state.item.image), // 商品主图
        price: state.item.price[0], // 商品价格
        original_price: state.item.original_price, // 商品原价
      },
    );
  }

});
const delGoods = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除吗？',
    success: function (res) {
      if (res.confirm) {
        sheep.$api.store.deleteStoreGoods({
          id: item.id,
          store_ids: shopId.value
        }).then(res => {

          uni.showToast({
            title: '删除成功',
          })
          setTimeout(() => {
            getList()
          }, 500);
        })
      }
    }

  })
}
const openShop = () => {
  uni.navigateTo({
    url: '/pages/store/index',

  })
}
const gotoSelectGoods = () => {
  uni.navigateTo({
    url: '/pages/store/supplyshop?shopid=' + shopId.value
  })
}

const loginGetStore = () => {
  console.log("请求接口1111")
  getShopInfo()
  getList()
}
const shareType = ref(0)
const share = () => {
  shareType.value = 0
  state.item = shopInfo.value
  console.log(shopInfo.value);

}

const shares = (item) => {
  shareType.value = 0
  state.item = shopInfo.value
  showShareModal(shareInfo.value)
}

const search = ref('')
const shopId = ref(0)
const goodsList = ref([
])
const shopStatus = ref(0)
// 获取店铺信息
const shopInfo = ref({})
const getShopInfo = async () => {

  const data = await sheep.$api.store.getNormalStoreInfo({
    id: shopId.value
  })
  shopInfo.value = data.data

}
function goodsClick(item) {
  // setUpUsers()
  uni.navigateTo({
    url: `/pages/goods/index?id=${item.id}&shopid=${shopId.value}&user_id=${userId.value}&store_id=${shopId.value}`
  })
}


const state = reactive({
  loadStatus: 'more',
  // 页数
  page: 0,
  list: [],
  search: {},
  activeId: '',
  showRegion: false,
  address: '',
  taskUserId: ''
})






function searchChange(e) {
  console.log(e);

  state.search = e
  // console.log('searchChange',e)
  onSearch()
}






const onSearch = () => {

  getList();
}


// onReachBottom(() => {
//   getList();
// })



async function getList() {
  let data1 = {}
  data1 = {
    'id': shopId.value,
    title: search.value

  }

  const { data } = await sheep.$api.store.getNormalStoreGoods(data1)

  goodsList.value = data.reverse()

}


const setUpUsers = async () => {
  if (JSON.parse(uni.getStorageSync('user-store')) !== '') {
    userInfos.value = JSON.parse(uni.getStorageSync('user-store')).userInfo
    if (uni.getStorageSync('taskUserId') !== "" && userInfos.value.id !== uni.getStorageSync('taskUserId')) {
      const data = {
        taskUserId: state.taskUserId
      }
      const res = sheep.$api.store.setUpUser(data)
      console.log(res, '设置上级');

    }
  }
  else {
    const data = {
      taskUserId: uni.getStorageSync('taskUserId')
    }
    const res = sheep.$api.store.setUpUser(data)
    console.log(res, '设置上级')
  }


}
const userId = ref(null)
onLoad(async (opt) => {
  if (opt) {
    console.log(opt, 'opt');

    if (opt.id) {
      shopId.value = opt.id;
    }
    else {
      console.log(JSON.parse(uni.getStorageSync('user-store')), 'pppp')
      shopId.value = JSON.parse(uni.getStorageSync('user-store')).userInfo.cyq_store_id
    }
    
    if (opt.user_id) {
      userId.value = opt.user_id
    }
    else {
      userId.value = JSON.parse(uni.getStorageSync('user-store')).userInfo.id
    }

  }



  // 使用正确的条件判断语法
  console.log(shopId.value, 'shopId.value');

  await getShopInfo()
  await getList();
})
onShow(async () => {
  if (JSON.parse(uni.getStorageSync('user-store'))) {
    userInfos.value = JSON.parse(uni.getStorageSync('user-store')).userInfo
  }
  await getShopInfo()
  await getList();
})


</script>


<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.del {
  color: #e75329;
  text-align: left;
  width: 100%;
}

.noshopid {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30vh auto;

  .openShop {
    padding: 20rpx 40rpx;
    background: #0e88db;
    color: #fff;
    margin-top: 40rpx;
    border-radius: 999999rpx;

  }
}

.item-bounty {

  // padding: 0 10rpx;
  margin: 10rpx 0 10rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .brokerage {
    color: #FA8B23;
    font-size: 22rpx;

    text {
      font-size: 26rpx;
    }
  }

  .ratio {
    font-size: 20rpx;
    background-color: #3d3d3d;
    height: 28rpx;
    text-align: center;
    color: #F4E7DA;
    line-height: 28rpx;
    padding-left: 5rpx;

    .valuye {
      height: 28rpx;
      line-height: 28rpx;
      color: #3D3D3D;
      background-color: #f4e7da;
      padding:0 10rpx;

    }
    .label{
      margin-right: 5rpx;
    }
  }
}

.nogoods {
  text-align: center;
  font-size: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 400rpx auto;
}

.rank {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #fba503;
  margin-top: 10rpx;
}

.detail-tabbar-item {
  width: 100rpx;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;

  .item-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 0 !important;
  }

  .item-title {
    font-size: 20rpx;
    font-weight: 500;
    line-height: 20rpx;
    margin-top: 12rpx;
  }
}

.priceTabs {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;

  .item {

    width: 50%;
    text-align: center;
  }
}

.shopinfo {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20rpx;
  width: 100%;
  position: relative;
  padding-top: 40rpx;
  padding-bottom: 10rpx;

  .left {
    display: flex;
    justify-content: start;
    align-items: center;
    min-width: 180rpx;
    .title {
      font-size: 30rpx;
      color: #333;
      word-wrap: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    image {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
    }

    .title {
      .posi {
        margin-bottom: -10rpx;
      }
    }
  }

  .right {
    display: flex;
    justify-content: space-between;
    align-items: start;
    height: 100%;

    image {
      width: 80rpx;
      margin-right: 20rpx;
    }



    .posiss {
      position: absolute;
      right: 10rpx;
      top: 48rpx;
      display: flex;
	  align-items: center;
      .tit{
        margin-top: -10rpx;
      }
      .goodselect {
        display: flex;
        padding: 0 12rpx;
        background: #E75329;
        color: #fff;
        border-radius: 10rpx;
        height: 50rpx;
        line-height: 50rpx;
        margin-right: 20rpx;
      }
    }

    .shares {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      font-size: 24rpx;
      color: #DC2B2B;

      image {
        width: 50rpx;
      }
    }

  }
}

.uni-input-placeholder {
  font-size: 24rpx;
  color: #E4E4E4;
}

.goodsList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10rpx;
  width: calc(100%);
  margin: 10rpx auto;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;

  .goods-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc((100% - 10rpx) / 2);
    margin-top: 16rpx;
    background: #f7f7f7;
    padding: 10rpx;
    border-radius: 20rpx;

    .goods-img {
      max-width: 100%;
      height: 350rpx;
    }

    .goods-title {
      margin-top: 10rpx;
      // padding-left: 20rpx;
      width: 100%;
      // 移除 display: flex 相关属性
      height: 67rpx; // 增加高度以适应两行文字
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis; // 添加省略号
      font-size: 28rpx; // 添加字体大小
      line-height: 33rpx; // 添加行高

    }

    .goods-desc {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10rpx;
      // padding-left: 20rpx;
      margin-bottom: 12rpx;

      .desc {
        font-family: Source Han Sans;
        color: #E75329;
        font-family: Source Han Sans;
        font-weight: bold;
        font-size: 28rpx;
        width: 140rpx;
      }

      .share-sales {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        .sales {
          max-width: 160rpx;
          height: 38rpx;
          font-family: Source Han Sans;
          font-size: 24rpx;
          font-weight: normal;
          line-height: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          letter-spacing: normal;
          color: #9E9E9E;
          margin-right: 22rpx;

          display: flex;
          justify-content: center;
          align-items: flex-end;
        }

        .share {
          width: 33rpx;
          height: 33rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #D8D8D8;
          border-radius: 50%;
          margin-left: 10rpx;
          margin-right: 20rpx;
          margin-top: 8rpx;


          .share-img {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }


    }
  }

  .goods-item:nth-child(2n-1) {
    margin-right: 10rpx;
    ;
  }

}


.bg_color {
  background-color: rgba(255, 255, 255, 0);
}

.search {
  /* #ifdef MP||H5 */
  height: 65rpx;
  /* #endif */

  /* #ifdef APP */
  height: 35rpx;
  /* #endif */


  .left {

    height: 100%;

    .region {
      font-family: PingFang SC;
      font-size: 30rpx;
      font-weight: normal;
      line-height: 30rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.64rpx;
      width: 98rpx;


      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      font-variation-settings: "opsz" auto;
      color: #3D3D3D;

    }

    .img {
      width: 25rpx;
      height: 18rpx;
    }
  }

  .right {
    width: calc(100% - 30rpx - 98rpx - 20rpx - 20rpx - 20rpx - 40rpx);
    background-color: #fff;
    margin-right: 20rpx;
    margin-left: 20rpx;
    height: 100%;
    border: 2rpx solid #fff;

    .search-view {
      /* #ifdef MP */
      width: 290rpx;
      /* #endif */
      /* #ifndef MP */
      width: 290rpx;
      /* #endif */
      height: 100%;

      .my-input {
        color: #333;
        /* #ifdef MP||H5 */
        height: 50rpx;
        /* #endif */
        /* #ifdef APP */
        height: 30rpx;
        /* #endif */
        width: 290rpx;
        max-height: 50rpx;
        margin-left: 20rpx;

      }

      .search-icon {
        margin-left: 20rpx;
      }

    }

    .search_btn {
      background-color: #F46800;
      color: #fff;
      /* #ifdef MP||H5 */
      width: 134rpx;
      /* #endif */
      /* #ifdef APP */
      width: 94rpx;
      /* #endif */
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40rpx;
      font-size: 30rpx;
      margin-right: 60rpx;
    }

  }

}






.tabs {}

.blank {
  height: 50rpx;
  width: 100%;
  text-align: center;
  margin: 40rpx auto;
}

::v-deep .tabs .u-tabs {
  border-bottom: none;
  background-color: rgba(255, 255, 255, 0);
}






.category {
  width: 100%;
  height: 80rpx;
  font-family: PingFang SC;

  .itmes {
    width: 200rpx;
    height: 100%;
    font-size: 30rpx;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }



}

.active {
  color: #F46800;
  ;
  border: 4rpx solid;
  border-image: radial-gradient(45% 45% at 51% 100%, #F46800 0%, rgba(71, 223, 189, 0) 100%) 4;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_H {
  display: inline-block;
  background-color: #FFFFFF;
  min-width: 70rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 36rpx;
}

.type {
  font-family: PingFang SC;
  font-size: 24rpx;
  font-weight: normal;
  color: #4F4F4F;
  border-radius: 10rpx;
  margin-right: 5rpx;
  margin-left: 5rpx;
  // padding-left:10rpx;
  // padding-right:10rpx;
  letter-spacing: 1rpx;


}

.ssactive {
  color: #F46800;
  background: #FFF8F3;
  border: solid 1rpx #F46800;
}
</style>